<template>
	<view>
		<u-navbar :safeAreaInsetTop="true" title="帖子详情" autoBack :bgColor="'rgba(255,255,255,'+opc+')'" placeholder>
			<u-icon slot='right' name="share-square" size="46rpx" style="font-weight: bold;" color="#000"></u-icon>
		</u-navbar>
		<view class="con">
			<view class="postitem">
				<view class="postitem__user" @click.stop="navto('/pages/personal/homepage')">
					<image src="/static/cao/tx.png" class="postitem__tx" mode="aspectFill"></image>
					<view class="" style="flex: 1;">
						<view class="postitem__username">
							时光匆匆
						</view>
						<view class="postitem__time">
							2024-06-08 16:24
						</view>
					</view>
					<view class="postitem__btn" @click.stop="">
						关注
					</view>
				</view>
				<view class="postitem__cont">
					今天天气很好NICE?Mm,,每天都适合刷街啊
				</view>
				<view class="postitem__xc" v-if="item.pics.length>0">
					<!-- 一张图片 -->
					<image @click.stop="preview(item.pics,index)" v-if="item.pics.length==1" v-for="(item1,index) in item.pics" :src="item1" :key="index" class="postitem__pic1" mode="aspectFill"></image>
					<!-- 两/四张图片 -->
					<view class="u-flex u-flex-y-center u-flex-wrap u-flex-between">
						<image @click.stop="preview(item.pics,index)" v-if="item.pics.length==2||item.pics.length==4" :src="item1" v-for="(item1,index) in item.pics" :key="index" class="postitem__pic2" mode="aspectFill"></image>
					</view>
					<!-- 其他 -->
					<view class="u-flex u-flex-y-center u-flex-wrap">
						<image @click.stop="preview(item.pics,index)" v-if='item.pics.length!=2&&item.pics.length!=4&&item.pics.length!=1' :src="item1" v-for="(item1,index) in item.pics" :key="index" class="postitem__pic3" mode="aspectFill"></image>
					</view>
				</view>
				<view class="postitem__footer">
					浏览21次
				</view>
			</view>
			<view class="box">
				<view class="box__title">
					共112条评论
				</view>
				<view class="box__list">
					<view class="box__list__item" v-for="(item,index) in 5" :key="index">
						<view class="u-flex u-flex-y-center">
							<image src="/static/cao/tx.png" class="box__list__item__tx" mode=""></image>
							<view class="" style="flex: 1;">
								<view class="box__list__item__username">
									未来
								</view>
								<view class="box__list__item__time">
									05-18 18:24 
								</view>
							</view>
							<image src="/static/goods/good.png" class="box__list__item__dzicon" mode=""></image>
							<view class="box__list__item__dz">
								3
							</view>
						</view>
						<view class="box__list__item__cont">
							小朋友好厉害啊，学了几年了啊，看的我也好像 学习，好酷啊
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer__inp">
				发布评论...
			</view>
			<view class="footer__cz">
				<image src="/static/cao/sc.png" class="footer__sc" mode=""></image>
				234
			</view>
			<view class="footer__cz">
				<image src="/static/cao/dz.png" class="footer__sc" mode=""></image>
				996
			</view>
			<view class="footer__cz">
				<image src="/static/cao/pl.png" class="footer__sc" mode=""></image>
				112
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opc:1,
				item:{pics:['/static/cao/pic.png']},
			};
		}
	}
</script>

<style lang="scss">
.con{
	padding: 30rpx;
}
.postitem{
	// height: 625rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 26rpx 26rpx;
	padding: 26rpx 0 28rpx 28rpx;
	margin-bottom: 22rpx;
	&__user{
		display: flex;
		align-items: center;
		
	}
	&__username{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #010101;
		line-height: 24rpx;
	}
	&__time{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		font-size: 22rpx;
		color: #797979;
		line-height: 22rpx;
		margin-top: 20rpx;
	}
	&__btn{
		width: 104rpx;
		height: 52rpx;
		background: #fff;
		border-radius: 26rpx;
		border: 1rpx solid #E3432D;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #E3432D;
		line-height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 22rpx;
	}
	&__tx{
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	&__cont{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #010101;
		line-height: 40rpx;
		margin: 20rpx 0 10rpx;
		padding-right: 28rpx;
	}
	&__xc{
		padding: 10rpx 8rpx 10rpx 0;
	}
	&__pic1{
		width: 644rpx;
		height: 362rpx;
		border-radius: 26rpx;
	}
	&__pic2{
		width: 310rpx;
		height: 270rpx;
		border-radius: 26rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
	&__pic3{
		width: 205rpx;
		height: 184rpx;
		border-radius: 26rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
	
	&__footer{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #231815;
		line-height: 22rpx;
	}
}

.box{
	padding: 33rpx 21rpx 146rpx 19rpx;
	background-color: #FFF;
	border-radius: 26rpx 26rpx 26rpx 26rpx;
	&__title{
		font-size: 27.09rpx;
		color: #231815;
		font-weight: bold;
	}
	&__list{
		padding: 0 0 0 5rpx;
		&__item{
			border-bottom: 1rpx solid #E9EAEC;
			padding: 36rpx 6rpx 24rpx 2rpx;
			&__tx{
				width: 64rpx;
				height: 64rpx;
				background: #888A8C;
				border-radius: 50%;
				margin-right: 12rpx;
			}
			&__username{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 26rpx;
			}
			&__time{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #929292;
				line-height: 22rpx;
				margin-top: 16rpx;
			}
			&__dz{
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
				margin-top: 10rpx;
			}
			&__dzicon{
				width: 33rpx;
				height: 31rpx;
				margin-right: 11rpx;
			}
			&__cont{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: normal;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				padding-left: 74rpx;
				margin-top: 30rpx;
			}
		}
	}
}

.footer{
	width: 750rpx;
	height: 121rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,.1);
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	&__inp{
		width: 315rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		border: 2rpx solid #EADCE1;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: normal;
		font-size: 28rpx;
		color: #515151;
		padding: 0 46rpx;
		display: flex;
		align-items: center;
		margin-left: 32rpx;
	}
	&__cz{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: DINNextLTPro, DINNextLTPro;
		font-weight: bold;
		font-size: 24rpx;
		color: #231815;
		line-height: 24rpx;
		margin: 10rpx 30rpx;
	}
	&__sc{
		width: 43rpx;
		height: 41rpx;
		margin-bottom: 9rpx;
	}
	&__dz{
		width: 45rpx;
		height: 39rpx;
		margin-bottom: 11rpx;
	}
	&__pl{
		width: 41rpx;
		height: 39rpx;
		margin-bottom: 11rpx;
	}
}
</style>
